// var that;
// class Tab {
//     constructor(id) {
//         that = this//避免与其他this冲突
//         this.main = document.querySelector(id)
//         this.add = this.main.querySelector('.tabadd')
//         this.ul = this.main.querySelector('.fisrstnav ul')
//         this.tabscon = this.main.querySelector('.tabscon')
//         this.init()
//     }
//     init() {
//         // 所有的动态数据都需要在操作后再次获取然后给其都添加相应的事件
//         this.updataNode()
//         this.add.onclick = this.addTab;
//         for (var i = 0; i < this.lis.length; i++) {
//             this.lis[i].index = i
//             this.lis[i].onclick = this.taggleTab;
//             this.removeIcon[i].onclick = this.removeTab;
//             this.spans[i].ondblclick = this.editTab;
//             this.sections[i].ondblclick = this.editTab
//         }
//     }
//     //  获取动态数据 
//     updataNode() {
//         this.lis = this.main.querySelectorAll('li')
//         this.sections = this.main.querySelectorAll('section')
//         this.removeIcon = this.main.querySelectorAll('.icon-guanbi')
//         this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
//     }
//     // 1.切换功能
//     taggleTab() {
//         that.clearClass()
//         this.className = 'liactive'
//         that.sections[this.index].className = 'conactive'
//     }
//     clearClass() {
//         for (var i = 0; i < this.lis.length; i++) {
//             this.lis[i].className = ''
//             this.sections[i].className = ''
//         }
//     }

//     // 2.添加功能
//     addTab() {
//         var radm = Math.random(1, 2)
//         that.clearClass()
//         var li = ' <li class="liactive"><span>新增块</span><span class="iconfont icon-guanbi"></span></li>'
//         var section = ' <section class="conactive">测试1' + radm + '</section>' 
//         that.ul.insertAdjacentHTML('beforeend', li)
//         that.tabscon.insertAdjacentHTML('beforeend', section)
//         that.init()//新增的元素也要绑定点击事件所以需要再次调用一下init 让他获取到最新的元素数量然后都给其绑定上事件
//     }

//     // // 3.删除功能
//     removeTab(e) {
//         e.stopPropagation()
//         var index = this.parentNode.index
//         that.lis[index].remove()
//         that.sections[index].remove()
//         // 如果当前元素处在被选中状态 就不在执行删除某个元素后自动跳转的功能
//         if (document.querySelector('.liactive')) return;
//         // 删除当前元素后自动跳转到上一个元素
//         index--
//         // 当index为负数被删完了也就为false 就不在执行此程序
//         that.lis[index] && that.lis[index].click()
//         that.init()

//     }

//     //4.编辑功能
//     editTab() {
//         // 双击时本文不会被选中
//         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//         var str = this.innerHTML
//         this.innerHTML = '<input type="text">'
//         var input = this.children[0]
//         input.value = str
//         input.select()//文本框里面的文字处于选定状态方法
//         input.onblur = function () {
//             this.parentNode.innerHTML = input.value
//         }
//         input.onkeyup = function (e) {
//             if (e.keyCode === 13) {
//                 this.blur()
//             }
//         }


//     }
// }
// new Tab('#tab')